<style type="text/css">
.category-item {
    width: 25%;
    float: left;
}
.category-item:not(:nth-child(4n)) .category-item-img {
    border-right: 1px solid #efefef;
}
.category-item .category-item-img {
    border-bottom: 1px solid #efefef;
    flex: 1;
    height: 3rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.category-item-img img {
    display: flex;
    width: 1.5rem;
    margin: 0 auto;
    border-radius: 50%;
}
.category-item-name {
    color: #666;
    display: block;
    height: 24px;
    line-height: 24px;
    text-align: center;
    overflow: hidden;
    width: 100%;
}
</style>
<template>
	<div class="category-item" @click="$emit('click')">
        <div class="category-item-img">
            <img  :src="categoryItem.categoryIcon">
            <span class="category-item-name">{{categoryItem.name}}</span>
        </div>
    </div>
</template>
<script>
	export default {
		name: 'category-item',
        props: ['categoryItem']
	}
</script>